<template>
	<view class="root">
		<view class="ling-view"></view>

		<view class="input-view">
			宝宝姓名:<input v-model="name" class="input" />
		</view>

		<view class="input-view">
			<view>宝宝性别:</view>
			<radio-group  class="input-children-sex" @change="radioChange">
				<label>
					<radio :checked="gender==='1'" :color="color" class="children-sex-radio" value="1">男</radio>
				</label>
				<label>
					<radio :checked="gender==='0'" :color="color" class="children-sex-radio" value="0">女</radio>
				</label>
			</radio-group>
		</view>

		<view class="input-view">
			宝宝身高:<input v-model="height" class="input" placeholder="CM" type="number" />
		</view>

		<view class="input-view">
			宝宝体重:<input v-model="weight" class="input" placeholder="KG" type="digit" @input="onlyNumber" />
		</view>

		<view class="input-view">
			家长号码:
			<view class="input">
				<input maxlength="11" v-model="parentPhone" type="number" style="flex-grow: 1;margin-right: 10rpx;" />
				<view style="width: 2rpx;height: 60rpx; background-color: rgba(153, 153, 153, 1);"></view>
				<picker @change="bindPickerChange" :value="index" :range="relationship">
					<view class="relationship-view">
						<text style="margin-left: 18rpx;flex-grow: 1;text-align: center;margin-bottom: 5rpx;" :class="index != -1 ?'relationship-style':''">{{index!=-1?relationship[index]:'选择关系'}}</text>
						<view class="relationship-dropdown"></view>
					</view>
				</picker>
			</view>
		</view>

		<view class="action-view">
			<view class="btn" @click="commitClick">提交</view>
			<view class="btn" style="margin-left: 40rpx;" @click="delClick">删除</view>
		</view>
	</view>
</template>

<script>
	import utils from '../../utils/utils.js'
	export default {
		data() {
			return {
				id: '',
				name: '',
				gender: '',
				height: '',
				weight: '',
				parentPhone: '',
				
				index: 1,
				relationship: ['爸爸', '妈妈', '爷爷', '奶奶', '外公', '外婆', '其他'],
				
				color: '#FACB2F',
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.name = options.name;
			this.gender = options.gender;
			this.height = options.height;
			this.weight = options.weight;
			this.parentPhone = options.parentPhone;

			this.index = this.relationship.indexOf(options.guardianRelation);

			this.color = getApp().globalData.themeColor
		},
		methods: {
			bindPickerChange(e) {
				console.log(e.target.value);
				this.index = e.target.value
			},
			
			commitClick() {
				uni.showLoading({});
				if (utils.isEmpty(this.name)) {
					uni.showToast({
						title: '请填写宝宝姓名',
						icon: 'none'
					})
					return;
				}
				if (utils.isEmpty(this.height)) {
					uni.showToast({
						title: '请填写宝宝身高',
						icon: 'none'
					})
					return;
				}
				var height = parseInt(this.height);
				if (height < 40 || height > 150) {
					uni.showToast({
						title: '您输入的身高不在正常范围(40-150cm)',
						icon: 'none'
					})
					return;
				}
				if (utils.isEmpty(this.weight)) {
					uni.showToast({
						title: '请填写宝宝体重',
						icon: 'none'
					})
					return;
				}
				var weight = parseInt(this.weight);
				if (weight < 2 || weight > 35) {
					uni.showToast({
						title: '您输入的体重不在正常范围(2-35kg)',
						icon: 'none'
					})
					return;
				}
				if (utils.isEmpty(this.gender)) {
					uni.showToast({
						title: '请选择宝宝性别',
						icon: 'none'
					})
					return;
				}
				if (!utils.checkMobile(this.parentPhone)) {
					uni.showToast({
						title: '请填写正确的联系方式',
						icon: 'none'
					})
					return;
				}
				var params = {
					childrenId: this.id,
					childrenName: this.name,
					gender: this.gender,
					height: this.height,
					nickName: this.name,
					weight: this.weight,
					guardianPhone: this.parentPhone,
					guardianRelation: this.relationship[this.index],
				}
				this.$http.post(
						'/eapi/operator/update_child_info', {}, {
							params: params,
						}).then(res => {
						uni.hideLoading();
						if (res.code === '000000'){
							uni.showToast({
								title:'信息更新成功',
								icon:'none'
							})
						}else {
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
					.catch(err => {
						uni.hideLoading();
						console.log(err);
					});
			},

			delClick() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该宝宝吗?',
					success: function(res) {
						if (res.confirm) {
							that.deleteChildren();
						}
					}
				});
			},

			deleteChildren() {
				uni.showLoading({})
				this.$http.request({
					method: 'POST',
					url: '/eapi/operator/delete_children',
					params: {
						childrenId: this.id
					}
				}).then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.code === '000000') {
						uni.switchTab({
							url: '../../pages/children-list/children-list'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},

			radioChange(evt) {
				this.gender = evt.detail.value;
			},

			onlyNumber(e) {
				this.weight = '';
				var value = e.detail.value;
				console.log(value);
				//得到第一个字符是否为负号
				var t = value.charAt(0);
				//先把非数字的都替换掉，除了数字和. 
				value = value.replace(/[^\d\.]/g, '');
				//必须保证第一个为数字而不是. 
				value = value.replace(/^\./g, '');
				//保证只有出现一个.而没有多个. 
				value = value.replace(/\.{2,}/g, '.');
				//保证.只出现一次，而不能出现两次以上 
				value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
				//如果第一位是负号，则允许添加
				if (t == '-') {
					value = '-' + value;
				}
				console.log(value);
				this.weight = value;
			},
		}
	}
</script>

<style lang="scss">
	.root {
		display: flex;
		flex-direction: column;
	}

	.input-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 42rpx;

		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 29px;
		color: rgba(102, 102, 102, 1);
	}

	.input {
		width: 400rpx;
		height: 30px;
		border: 1px solid rgba(221, 221, 221, 1);
		opacity: 1;
		border-radius: 4px;
		margin-left: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		text-align: right;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.input-children-sex {
		margin-left: 10rpx;
	}
	
	.children-sex-radio {
		margin-right: 30rpx;
	}

	.action-view {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		align-self: center;

		width: 120px;
		height: 50px;
		background: rgba(250, 203, 47, 1);
		opacity: 1;
		border-radius: 4px;


		font-size: 18px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 25px;
		color: rgba(255, 255, 255, 1);
		opacity: 1;

		margin-top: 120rpx;
		
		@include app-btn-background();
	}
	
	.relationship-view {
		width: 174rpx;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #CCCCCC;
	}
	
	.relationship-style {
		font-size: 30rpx;
		color: #666666;
	}
	
	.relationship-dropdown {
		width: 0;
		height: 0;
		border-top: 14rpx solid #707070;
		border-right: 14rpx solid transparent;
		border-bottom: 0rpx solid transparent;
		border-left: 14rpx solid transparent;
		margin-right: 15rpx;
	}
</style>
